import React, { Component } from 'react'
import { connect } from 'react-redux'
import { dataset as datasetDuck } from 'ducks'
import { push } from 'react-router-redux'
import PropTypes from 'prop-types'
import {
  Grid,
  Image,
  Dropdown,
  Menu,
  Input,
  Breadcrumb,
  Table,
  Checkbox,
  Icon,
} from 'semantic-ui-react'
import DefaultButton from 'components/Button'
import { TableRow, TableDeleteButton, OptionIcon, OptionImage } from 'components/memberTable'
import { LinkButton } from 'components/Button'
import { project as projectDuck } from 'ducks'

const options = [
  { key: 'user', text: 'Account', icon: 'user' },
  { key: 'settings', text: 'Settings', icon: 'settings' },
  { key: 'sign-out', text: 'Sign Out', icon: 'sign out' },
]

class Members extends Component {
  static propTypes = {
    actionSetActiveTaskTab: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { actionSetActiveTaskTab } = this.props
    actionSetActiveTaskTab('download')
  }

  render() {
    const { match } = this.props
    return (
      <Grid>
        <Grid.Row>
          <Grid.Column>
            <Menu secondary>
              <Menu.Item fitted>
                <LinkButton src={`${match.url}/new`}>创建下载任务</LinkButton>
              </Menu.Item>
            </Menu>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column>
            <Table basic="very" style={{ marginBottom: '2em' }}>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>
                    <Checkbox />
                  </Table.HeaderCell>
                  <Table.HeaderCell
                    style={{
                      wordBreak: 'keep-all',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    创建人
                  </Table.HeaderCell>
                  <Table.HeaderCell></Table.HeaderCell>
                  <Table.HeaderCell>开始时间</Table.HeaderCell>
                  <Table.HeaderCell>结束时间</Table.HeaderCell>
                  <Table.HeaderCell>状态</Table.HeaderCell>
                  <Table.HeaderCell />
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>
                    <Image src="http://xingjing.dudc.org/a21.jpg" rounded size="mini" />
                  </Table.Cell>
                  <Table.Cell>裴宣</Table.Cell>
                  <Table.Cell>2018-11-05 17:04</Table.Cell>
                  <Table.Cell>2018-11-05 18:04</Table.Cell>
                  <Table.Cell>完成</Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionImage
                      className="options"
                      src="https://img.icons8.com/office/2x/more.png"
                    />
                  </Table.Cell>
                </TableRow>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>
                    <Image src="http://xingjing.dudc.org/a24.jpg" rounded size="mini" />
                  </Table.Cell>
                  <Table.Cell>凸凸</Table.Cell>
                  <Table.Cell>2018-11-05 17:04</Table.Cell>
                  <Table.Cell>---</Table.Cell>
                  <Table.Cell>进行中</Table.Cell>
                  <Table.Cell className="last-cell" width={2} textAlign="right">
                    <OptionImage
                      className="options"
                      src="https://img.icons8.com/office/2x/more.png"
                    />
                  </Table.Cell>
                </TableRow>
              </Table.Body>
            </Table>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

const mapDispatchToProps = {
  actionSetActiveTaskTab: projectDuck.creators.actionSetActiveTaskTab,
}

export default connect(
  null,
  mapDispatchToProps,
)(Members)
